<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
    <title>Title</title>
    <script src="lib/js/bootstrap.min.js"></script>
    <!--<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>-->
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link href="lib/css/bootstrap.min.css" rel="stylesheet" >
    <style type="text/css">

        ul,li{
            list-style: none;
            padding: 0;
            margin:0;
        }
        .cupid-item{
            padding:5px;
        }
        .cupid-item .avatar img{
            display: block;
            max-width: 100%;
        }
        .cupid-avatar{
            display: block;
            max-width: 1.833rem;
            border-radius: 1.1666rem;
        }
        .half-top{
            background-color: #d3352e;
        }
        .rule-title {
            height: 1.0rem;
            line-height: 1.0rem;
            text-align: center;
        }
        .rule-title .line {
            display: inline-block;
            width: 2.8rem;
            border-top: 1px solid #ccc ;
            vertical-align: middle;
        }
        .rule-title .txt {
            color: white;
            font-size:0.4rem;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
    <script type="text/javascript">
        if (!dpr && !scale) {
            var isAndroid = win.navigator.appVersion.match(/android/gi);
            var isIPhone = win.navigator.appVersion.match(/iphone/gi);
            var devicePixelRatio = win.devicePixelRatio;
            if (isIPhone) {
                // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
                if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                    dpr = 3;
                } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
                    dpr = 2;
                } else {
                    dpr = 1;
                }

            } else {
                // 其他设备下，仍旧使用1倍的方案
                dpr = 1;
            }
            scale = 1 / dpr;
        }
    </script>
</head>
<!-- #d4342e -->
<body class="container-fluid" style="background-color: #d60000;height: 100%;position: relative">
    <img id="right-light" src="images/r_light.png" style="display: block;position: fixed;top:0;right:0;max-width: 3.266rem;z-index: 5"/>
    <img id="left-light" src="images/l_light.png" style="display: block;position: fixed;top:0;left: 0;max-width: 3.266rem;z-index: 1"/>
    <img id="left-flower" src="images/left_flower.png" style="display: block; position: fixed;left: 0;top:9.566rem;max-width: 1.388rem;z-index: 5"/>
    <div class="row cupid half-top" style="padding-top:0.84rem;">
        <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 col-md-offset-4 col-lg-offset-4 col-xs-offset-4 col-sm-offset-4" >
            <ul class="center-block">
                <li>
                    <div class="center-block ">
                        <img src="images/timg.jpg" class=" center-block cupid-avatar" >
                    </div>
                </li>
                <li><div class="text-center" style="color: white;font-size: 0.4rem;margin-top:0.15rem;"><span class="center-block">村花</span></div></li>
            </ul>
        </div>
    </div>
    <div class="row half-top">
        <div class="col-sm-10 col-md-10 col-xs-10 col-lg-10 col-sm-offset-1 col-md-offset-1 col-xs-offset-1 col-md-offset-1">
            <div class="center-block" style="margin-top:0.56rem;margin-bottom: 0.66rem;">
                <div>
                    <img src="images/title.png" style="display: block;width: 7rem;position: relative;z-index: 6;" class="center-block"/>
                </div>
            </div>
        </div>
    </div>
    <div class="row cupid-group" style="background-color: white;position: relative;z-index: 3">
        <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 cupid-item">
            <ul class="center-block">
                <li class="avatar"><img src="images/timg.jpg" ></li>
                <li><span>村花</span></li>
                <li><small>设计师</small></li>
            </ul>
        </div>
        <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 cupid-item">
            <ul class="center-block">
                <li class="avatar"><img src="images/timg.jpg" ></li>
                <li><span>村花</span></li>
                <li><small>设计师</small></li>
            </ul>
        </div>
        <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 cupid-item">
            <ul class="center-block">
                <li class="avatar"><img src="images/timg.jpg" ></li>
                <li><span>村花</span></li>
                <li><small>设计师</small></li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-10 col-lg-10 col-xs-10 col-sm-10 col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1">
            <div style="padding-top:0.8rem;padding-bottom: 0.5rem;">
                <a href="#" style="text-decoration: none;background-color: #ff4a55;display: block;height: 1.2rem;text-align: center;color: white;font-size: 0.48rem;line-height: 1.2rem;border-radius: 0.6rem;">加入圈子</a>
            </div>
        </div>
        <div class="col-md-10 col-lg-10 col-xs-10 col-sm-10 col-md-offset-1 col-lg-offset-1 col-sm-offset-1 col-xs-offset-1">
            <div class="rule">
                <div class="rule-title">
                    <span class="line"></span>
                    <span class="txt">活动详情</span>
                    <span class="line"></span>
                </div>
                <p class="rule-text" style="color: white;font-size: 0.315rem;">
                    丘比特是亚洲最大成人交友中心，汇集全亚洲各国佳丽，公主
                </p>
            </div>
        </div>
    </div>

</body>
</html>